import React from 'react';
import {View, StyleSheet} from 'react-native';
import {Card, Text, Icon} from 'react-native-elements';
import CommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

class TabView extends React.Component {
  -renderChildren = () => {
    const {children} = this.props;
    if (children) {
      return (
        <>
          <CommunityIcons name={'bell-alert'} style={{color: 'red', fontSize: 25}}/>
          <Card
            containerStyle={{
              borderColor: 'transparent',
              shadowOffset: {width: 5, height: 8},
              shadowOpacity: 0.9,
              shadowRadius: 8,
            }}>
            <Text style={[styles.size16, styles.blue]}>报警类型：{children.type}</Text>
            <Text style={[styles.size16, styles.blue]}>编码：{children.code}</Text>
            <Text style={[styles.size16, styles.blue]}>报警内容：{children.content}</Text>
            <Text style={[styles.size16, styles.blue]}>序列号：{children.serial_code}</Text>
          </Card>
        </>
      );
    }
  };

  render() {
    const {name, code, work_steps, current_output, set_output} = this.props;
    return (
      <Card
        title={name}
        containerStyle={{
          borderColor: 'transparent',
          shadowOffset: {width: 5, height: 8},
          shadowOpacity: 0.5,
          shadowRadius: 20,
        }}>
        <View>
          <Text style={[styles.size18, styles.blue]}>工作站编码：{code}</Text>
          <Text style={[styles.size18, styles.blue]}>工步：{work_steps}</Text>
          <Text style={[styles.size18, styles.blue]}>当前产量：{current_output}</Text>
          <Text style={[styles.size18, styles.blue]}>设定产量：{set_output}</Text>
        </View>
        <View>{this.renderChildren()}</View>
      </Card>
    );
  }
}

export default TabView;
const styles = StyleSheet.create({
  size18: {
    fontSize: 18,
  },
  size16: {
    fontSize: 16,
  },
  size25: {
    fontSize: 25,
  },
  blue: {
    color: '#53CAC4',
  },
  red: {
    color: 'red',
  },
  margin: {
    marginLeft: 36,
  },
  center: {
    textAlign: 'center',
    fontWeight: 'bold',
  },
});
